import { lazy } from 'react'
import { Outlet } from 'react-router-dom'
const About = lazy(() => import('../views/about'))//redux测试

const Login = lazy(() => import('../login/tuo'))//登录页面
const PLogn = lazy(() => import('../login/plogin'))//手机号验证码页面
const Enroll = lazy(() => import('../login/enroll'))//注册页面
//首页相关
const Layout = lazy(() => import('../layout/Layout'))//首页
const Livestr = lazy(() => import('../live/Livestream'))//主播页面
const LiveViewer = lazy(() => import('../live/viewer'))//直播观众页面
// 拍摄上传功能
const VideoApp = lazy(() => import('../video/App'))//拍摄上传页面
const VideoList = lazy(() => import('../video/sp'))//视频列表页面 
// 消息页
const Message = lazy(() => import('../chat/Message'))//消息页面
const Chat = lazy(() => import('../chat/Chat'))//聊天页面
const DeepAI = lazy(() => import('../chat/DeepAI'))//AI聊天页面
// 我的页
const My = lazy(() => import('../my/Me'))//我的页面
const EditProfile = lazy(() => import('../my/EditProfile'))//编辑资料
const Fensi = lazy(() => import('../my/Fensi'))//粉丝页面
const Friends = lazy(() => import('../my/Friends'))//好友页面 
const Shopping = lazy(() => import('../my/shopping'))//购物页面
const Xiangqing = lazy(() => import('../my/Detail'))//详情页面

// 底部TabBar
const TabButton = lazy(() => import('../chat/TabButton'))//底部TabBar

const NotFound = lazy(() => import('../views/notFound'))//404页面

// 创建一个主布局组件，包含TabButton和子路由内容
const MainLayout = () => {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={{ flex: 1, overflow: 'auto' }}>
        <Outlet /> {/* 子路由内容将在这里渲染 */}
      </div>
      <TabButton /> {/* 底部导航栏，固定显示 */}
    </div>
  )
}

const routes = [
  {
    path: '/',
    element: <MainLayout />,
    children: [ 
      { path: '', element: <Layout /> }, // 默认首页  
      { path: 'message', element: <Message /> }, // 消息页面 
      { path: 'my', element: <My /> }, // 我的页面
      { path: 'shopping', element: <Shopping /> }, // 购物页面

      { path: '*', element: <NotFound /> }, // 404页面
      { path: 'about', element: <About /> },
    ]
  },
  // 二级页面 - 不显示底部TabBar
  { path: '/chat', element: <Chat /> }, // 聊天页面
  { path: '/deepAI', element: <DeepAI /> }, // AI聊天页面

  { path: '/my/edit', element: <EditProfile /> }, // 编辑资料
  { path: '/edit-profile', element: <EditProfile /> }, // 编辑资料（兼容旧路径）
  { path: '/my/fans', element: <Fensi /> }, // 粉丝页面
  { path: '/my/friends', element: <Friends /> }, // 好友页面
  { path: '/xiangqing', element: <Xiangqing /> }, // 商品详情页面

  { path: '/live', element: <Livestr /> }, // 主播页面
  { path: '/lview', element: <LiveViewer /> }, // 直播观众页面

  { path: '/video', element: <VideoApp /> }, // 拍摄上传页面 
  { path: '/video/list', element: <VideoList /> }, // 视频列表页面 
  { path: '/login', element: <Login /> }, // 登录页面不需要显示TabBar
  { path: '/plogin', element: <PLogn /> }, // 手机号验证码页面不需要显示TabBar
  {path: '/enroll', element: <Enroll />}//注册页面
]
export default routes